<template>
	<view class="box">
		<view class="title">
			{{ info.title }}
		</view>
		<view class="mb20">
			<u-row>
				<u-col span="6">
					<view class="base-info">
						<u-icon name="clock"></u-icon>
						<view class="info-name">时间</view>
						<view class="info-value">
							{{ info.time }}
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="base-info">
						<u-icon name="star"></u-icon>
						<view class="info-name">难度</view>
						<view class="info-value">
							<u-rate :value="info.difficulty/2" gutter="0" readonly></u-rate>
						</view>
					</view>
				</u-col>
			</u-row>
			<u-row>
				<u-col span="6">
					<view class="base-info">
						<u-icon name="heart"></u-icon>
						<view class="info-name">收藏</view>
						<view class="info-value">
							{{ info.like }}人
						</view>
					</view>
				</u-col>
				<u-col span="6"></u-col>
			</u-row>
		</view>
		<view class="tags" v-if="info.tags.length">
			<view
				class="u-page__tag-item"
				v-for="item in info.tags"
				:key="item.id"
			>
				<u-tag
					:text="item.text"
					plain
					plainFill
					shape="circle"
				> </u-tag>
			</view>
		</view>
		<view class="note" v-if="info.note">
			<view class="note-title">
				大家的笔记
			</view>
			<view class="note-imgs">
				<u-row v-if="info.note.list.length" gutter="10">
					<u-col
						v-for="item in info.note.list"
						:key="item.id"
						span="3"
					>
						<u--image
							:src="item.img"
							width="160rpx"
							height="160rpx"
							mode="aspectFill"
							radius="10"
						></u--image>
					</u-col>
				</u-row>
			</view>
			<view class="note-first">
				<view class="note-first-info">
					<view class="note-avatar">
						<u--image
							width="80rpx"
							height="80rpx"
							mode="aspectFill"
							:src="info.note.firstNote.avatar"
							shape="circle"
						></u--image>
					</view>
					<view class="note-username">
						{{ info.note.firstNote.username }}
					</view>
					<view class="note-like">
						<u-icon name="thumb-up"></u-icon>
						<view>{{ info.note.firstNote.like }}</view>
					</view>
				</view>
				<view class="note-content">
					{{ info.note.firstNote.content }}
				</view>
			</view>
			<view class="note-total">
				全部{{ info.note.total }}条笔记
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'baseInfo',
		props: {
			info: {
				type: Object,
				default: () => ({
					title: '',
					time: '',
					difficulty: '',
					like: '',
					tags: [],
					note: null
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		margin-bottom: 40rpx;
	}
	.title {
		font-size: 40rpx;
		line-height: 2;
	}
	.base-info {
		display: flex;
		font-weight: 300;
		height: 60rpx;
		align-items: center;
		.info-name {
			margin: 0 20rpx 0 10rpx;
		}
	}
	.tags {
		display: flex;
		margin-bottom: 20rpx;
		.u-page__tag-item {
			margin-right: 20rpx;
		}
	}
	.note {
		.note-title {
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}
		.note-imgs {
			margin-bottom: 20rpx;
		}
		.note-first {
			border-radius: 20rpx;
			background: #efefef;
			padding: 20rpx 30rpx;
			margin-bottom: 10rpx;
			.note-first-info {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				.note-avatar {
					margin-right: 20rpx;
				}
				.note-username {
					flex: 1;
				}
				.note-like {
					display: flex;
				}
			}
		}
		.note-total {
			height: 90rpx;
			font-size: 34rpx;
			border-radius: 45rpx;
			background: #efefef;
			text-align: center;
			line-height: 90rpx;
		}
	}
</style>